<script setup lang="ts" name="task-detail">
import { computed, onMounted, ref } from "vue";
import {
  getCameraVideoUrl,
} from "@/api/server_video";
import { getEmergencyTaskDetail } from "@/api/server_emergency";
import Bus from "@/utils/eventBus";
import { ElMessage, ElMessageBox } from "element-plus";
const dialogVisible = ref(false);
const taskId = ref("1");
const cameraInfo = ref<any>({});
const caseInfo = ref<any>({});
const groupUserTaskDetails = ref<any>({});
const messageInfo = ref<any>({});
const taskInfo = ref<any>({
  detectionLogInfo:{}
});
const activeName = ref('');
const getEmergencyTaskDetail_ = async () => {
  let res = await getEmergencyTaskDetail({
    taskId: taskId.value,
  });
  
  cameraInfo.value = res.cameraInfo || {};
  caseInfo.value = res.caseInfo || {};;
  groupUserTaskDetails.value = res.groupUserTaskDetails || [];;
  messageInfo.value = res.messageInfo || {};;
  taskInfo.value = res.taskInfo || {};;
  if(groupUserTaskDetails.value[0]){
    activeName.value = res.groupUserTaskDetails[0].emergency_group_id;
  }
};
const openVidoe = (url:String) =>{
  Bus.$emit("openVideo",{
    video_url:url
  })
}
const openImage = async (id:String)=>{
  // let res = await getCameraVideoUrl({
  //   id: id,
  // });
  Bus.$emit("openVideo",{})
}
const opendxTemplate = ()=>{
  ElMessageBox.alert(messageInfo.value.content, '短信模板', {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: '关闭',
  })
}
onMounted(() => {
  Bus.$on("openEmergencyDetail", (data: any) => {
    dialogVisible.value = true;
    taskId.value = data.taskId || "";
    getEmergencyTaskDetail_();
  });
});
</script>
<template>
 <el-dialog :close-on-click-modal="false" 
    custom-class="app-video-dialog"
    v-model="dialogVisible"
    :modal="false"
    title="应急预案进度"
    width="1000px"
  >
    <div class="emergency-task-info">
      <div class="title">
        <span>应急方案:{{ caseInfo.name }}</span>
        <span>报警时间:{{ caseInfo.gmt_create }}</span>
        <span
          >组长:<span v-if="caseInfo.secondLeaderInfo"
            >{{ caseInfo.firstLeaderInfo.name }}({{
              caseInfo.firstLeaderInfo.phone
            }})</span
          ></span
        >
        <span
          >副组长:<span v-if="caseInfo.secondLeaderInfo"
            >{{ caseInfo.secondLeaderInfo.name }}({{
              caseInfo.secondLeaderInfo.phone
            }})</span
          ></span
        >
      </div>
      <div class="task-info">
        <div class="left">
          <app-box class="video-block" title="实时监控">
            <div class="info">
              <el-image
                    fit="contain"
                    class="big-image"
                    @click="openVidoe(taskInfo.detectionLogInfo.video_url)"
                    :src="taskInfo.detectionLogInfo.image_url"
                  >
                  </el-image>
            </div>
            <div class="info2">
              <div class="img"  v-for="(c,ci) in cameraInfo.related_camera_ids" @click="openImage(c)"></div>
            </div>
          </app-box>
          <app-box class="dx-block" title="应急短信">
            <template #more>
              <span @click="opendxTemplate">查看模板</span>
            </template>
            <div class="info">
              <div class="dx-item">
                <p>发送成功</p>
                <p>{{messageInfo.msgSendSuccessCnt}}</p>
              </div>
              <div class="dx-item">
                <p>发送失败</p>
                <p style="color:red">{{messageInfo.msgSendFailCnt}}</p>
              </div>
              <div class="dx-item">
                <p>已读</p>
                <p>{{messageInfo.msgSendReadCnt}}</p>
              </div>
              <div class="dx-item">
                <p>未读</p>
                <p style="color:red">{{messageInfo.msgSendUnreadCnt}}</p>
              </div>
            </div>
          </app-box>
        </div>
        <div class="right">
          <app-box class="search-block" title="人员响应情况">
            <div class="info">
              <el-tabs
    v-model="activeName"
    type="card"
    class="demo-tabs"
  >
    <el-tab-pane :label="item.name + `(${item.rate})`" :name="item.emergency_group_id" :key="index" v-for="(item,index) in groupUserTaskDetails">
     <el-collapse accordion>
      <el-collapse-item :name="ui" :key="ui" v-for="(user,ui) in item.users">
        <template #title>
        <div class="collapse-title">
            <h2  class="name">{{user.name}} </h2>
            <h2  class="phone" style=""> {{user.phone}}</h2>
            <el-progress  style="margin-left:150px;width:80px;" :text-inside="true" :stroke-width="16" :percentage="parseInt(user.rate)" />
        </div>
        </template>
        <div>
          <div class="item-task" :key="ti" v-for="(t,ti) in  user.tasks">
            <div class="status">
              <span class="icon" v-if="t.logInfo" :class="t.logInfo.status"></span>
              任务{{ti+1}}  {{t.gmt_create}}
            </div>
            <div class="content">{{t.content}}</div>
          </div>
        </div>
      </el-collapse-item>
      
    </el-collapse>

    </el-tab-pane>
  </el-tabs>

              
            </div>
          </app-box>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<style lang="scss">
.app-video-dialog {
  .emergency-task-info {
    width: 100%;
    .title {
      display: flex;
      justify-content: space-between;
      padding: 5px;
      background: #21262d;
      margin-bottom: 10px;
    }
    .task-info {
      display: flex;
      .left {
        width: 300px;
        flex-shrink: 0;
        .video-block .info{
          height:160px;
          background:#b9b0b0;
          cursor: pointer;
          .big-image{
            width:100%;
            height:100%;
          }
        }
        .video-block .info2{
          height:60px;
          margin-top: 5px;;
          display: flex;
          justify-content:flex-start;
           .img{
            cursor: pointer;
            height:60px;
            width:67px;
            margin:0 2px;
            background:#fff;
            background:url(@/assets/image/c.jpeg) no-repeat center/cover;
           }
        }
        .dx-block .info {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
        }
        .dx-item {
          width: 47%;
          height: 64px;
          margin: 5px 0;
          background: rgba(27, 154, 226, 0.1);
          border-radius: 2px;
          border: 1px solid rgba(58, 163, 185, 0.16);
           display: flex;
          flex-wrap: wrap;
          justify-content:center;
          align-items: center;
          p{
            width:100%;
            text-align:center;
          }
        }
      }
      .right {
        flex: 1;
        margin-left: 10px;
        .el-tab-pane{
          height:380px;
          overflow:auto;
        }
        .collapse-title{
          width:600px;
          display: flex;
          align-items: space-between;
          .name{
            width:100px;
            overflow:hidden;
            white-space: nowrap;
          }
          .phone{
            width:100px;
            overflow:hidden;
            white-space: nowrap;
            margin-left:40px;
          }
        }
        .item-task{
          .status{
            .icon{
              display:inline-block;
              height:10px;
              width:10px;
              border-radius:10px;
              background:#b9b0b0;
              border: 1px solid #b9b0b0;
              &.complete{
                background: #2FCC95;
              }
              
            }
          }
          .content{
            flex: 1;
            margin-left:10px;
          }
        }
      }
    }
  }
}
</style>
